<template>
  <div>
    <!-- <div class="">
      <company-select v-model="companyId" class-name="small-el-input__inner" popper-class="samll-el-select-dropdown__list" :disabled="userStore.userInfo.roleId!=1" @change="reGetData" />
    </div> -->
    <ul class="whlist">
      <li v-for="dt in lists" :key="dt.weatherFarmId" :class="{'selected':selectId==dt.weatherFarmId}" @click="setItem(dt)">
        <div class="ftips">
          <span :title="dt.farmName">{{ dt.farmName }}</span>
          <em>
            <img class="dk-img" src="@/assets/weather/dk.png">{{ dt.landCount }}块
            <img class="md-img" src="@/assets/weather/md.png">{{ dt.areaSizeTotal }}亩</em>
        </div>
        <div class="tab">
          <div class="item">
            <div>
              <img v-if="selectId==dt.weatherFarmId" class="selected-img" src="@/assets/weather/q1.png">
              <img v-else class="min-img" src="@/assets/weather/q2.png">
            </div>
            <p>气温</p><span>{{ dt.tempMin }}~{{ dt.tempMax }}<i>°C</i></span></div>
          <div class="item">
            <div>
              <img v-if="selectId==dt.weatherFarmId" class="selected-img" src="@/assets/weather/j1.png">
              <img v-else class="min-img" src="@/assets/weather/j2.png">
            </div>
            <p>降水</p><span>{{ dt.precip }}<i>mm</i></span></div>
          <div class="item">
            <div>
              <img v-if="selectId==dt.weatherFarmId" class="selected-img" src="@/assets/weather/f1.png">
              <img v-else class="min-img" src="@/assets/weather/f2.png">

            </div>
            <p>风力</p><span>{{ dt.windScale }}<i>级</i></span></div>
          <div class="item">
            <div>
              <img v-if="selectId==dt.weatherFarmId" class="selected-img" src="@/assets/weather/s1.png">
              <img v-else class="min-img" src="@/assets/weather/s2.png">
            </div>
            <p>湿度</p><span>{{ dt.humidity }}<i>%</i></span></div>
        </div>
      </li>
      <div v-if="lists && lists.length<1" style="text-align: center;padding:20px 0">暂无数据</div>
      <div v-if="lists && lists.length<total" class="more"><span @click="loadMore">点击加载更多</span></div>
    </ul>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import companySelect from '@/components/custom/companySelect.vue'
import { useUserStore } from '@/pinia/modules/user'
import { getFarmWeather } from '@/api/plant'

const userStore = useUserStore()

const emit = defineEmits(['change'])

const companyId = ref('')
const limit = ref(20)
const page = ref(1)
const lists = ref('')
const total = ref(0)
const selectId = ref('')

onMounted(() => {
  companyId.value = userStore.userInfo.companyId
  get_farm_weather()
})

const get_farm_weather = async() => {
  const res = await getFarmWeather({
    limit: limit.value,
    page: page.value,
    isEnable:true,
    companyId: companyId.value || null
  })
  total.value = res.total
  if (page.value === 1) {
    lists.value = res.data
  } else {
    lists.value = [...lists.value, ...res.data]
  }
  if (lists.value && lists.value.length > 0) {
    // 默认选择第一条
    selectId.value = lists.value[0].weatherFarmId
    emit('change', lists.value[0])
  } else {
    emit('change', '')
  }
}
const setItem = (item) => {
  selectId.value = item.weatherFarmId
  emit('change', item)
}

const loadMore = () => {
  page.value++
  get_farm_weather()
}

const reGetData = () => {
  page.value = 1
  get_farm_weather()
}
</script>
<style lang="scss" scoped>
.whlist{
    padding: 0;
    margin: 0;
    list-style: none;
    min-height:700px;
    max-height: calc(100vh - 140px);
    overflow: hidden;
    overflow-y: auto;
    li{
        border: 1px solid #eee;
        margin: 0 0 10px 0;
        cursor:pointer;
        &.selected{
            background-color: #00AF7015;
            border: 1px solid #01B07060;
            .item{
              span,
              i,
              p{
                  color:#333 !important;
              }
            }
        }
        .ftips{
            display: flex;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #eee;
            background-color: #f7f7f7;
            padding: 0 10px;
            color:#666;
            border-radius: 4px;
            .md-img{
              height:12px;
              width:12px;
            }
            .dk-img{
              width:14px;
            }
            .md-img{
              padding-left:10px;
            }
            span{
                flex: 1;
            }
            span{
              color:#333;
              font-weight: bold;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
        }
        &.selected {
          .ftips{
            border-bottom: 1px solid #eee;
            background-color: #00AF7030;
          }
          em{
            color:#333 !important;
          }
        }
        .tab{
            display: flex;
            margin: 10px 0 0 0;
            .item{
                flex: 1;
                line-height: 24px;
                text-align: center;
                padding-bottom:10px;
                .selected-img,
                .min-img{
                  height:39px;
                  width:32px;
                }
                p{
                  color:#666;
                  font-size:14px;
                }
                span{
                  font-size:18px;
                  font-weight:bold;
                  color:#666;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                i{
                  font-size:14px;
                  font-weight:200;
                  color:#666;
                }
                &+.item{
                    &::before{
                        content: '';
                        display: block;
                        float: left;
                        height: 75px;
                        border-left: 1px solid;
                        border-image: linear-gradient(4deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 1 1;
                    }
                }
            }
        }
    }
}
.more{
    text-align: center;
    padding: 10px 0;
    color: #999;
    span{
        &:hover{
            color: #333;
            cursor: pointer;
        }
    }
}
</style>
